<nz-card>
  <button
    nz-button
    nzType="primary"
    class="m-r-10"
    (click)="showClassOneModal(0)"
  >新增一级分类</button>
  
  <button
    nz-button
    nzType="primary"
    class="mbtn-green m-r-10"
    (click)="showClassTwoModal(0)"
  >新增二级分类</button>
  
  <button
    nz-button
    nzType="primary"
    class="mbtn-orange"
    (click)="showClassThreeModal(0)"
  >新增三级分类</button>

  <!-- 调试使用 -->
  <!-- <button nz-button nzType="primary" class="m-l-10" (click)="loadTable()">查询</button> -->
</nz-card>

<nz-card class="m-t-4">
  <div class="pagination-wrap-position table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzFrontPagination]="false"
      [nzScroll]="{ x: '1100px' }"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams?.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="120px">ID</th>
          <th nzAlign="center" nzWidth="300px">名称</th>
          <th nzAlign="center" nzWidth="100px">状态</th>
          <th nzAlign="center" nzWidth="120px">适用用户</th>
          <th nzAlign="center" nzWidth="180px">跳转方式</th>
          <th nzAlign="center" nzWidth="320px">链接/值</th>
          <th nzAlign="center" nzWidth="150px">图标</th>
          <th nzAlign="center" nzWidth="120px">排序</th>
          <th nzAlign="center" nzWidth="280px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let item of basicTable.data; let index = index;">
          <!-- ID -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                {{ item.id }}

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    {{ secondItem.id }}

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        {{ thirdItem.id }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 名称 -->
          <td nzAlign="left">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                <p class="put-away-p" (click)="onTableOneItem(item)">
                  <i 
                    *ngIf="item.list && item.list.length > 0"
                    nz-icon
                    [nzType]="item.isShow ? 'caret-down' : 'caret-right'"
                    nzTheme="outline">
                  </i>
                  <b class="p-l-8">{{ item.name }}</b>
                </p>

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul p-l-20">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    <p class="put-away-p" (click)="onTableSecondItem(secondItem)">
                      <i 
                        *ngIf="secondItem.list && secondItem.list.length > 0"
                        nz-icon
                        [nzType]="secondItem.isShow ? 'caret-down' : 'caret-right'"
                        nzTheme="outline">
                      </i>
                      <span class="main-text-color p-l-8">{{ secondItem.name }}</span>
                    </p>

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul p-l-22">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        <span class="secondary-text-color">{{ thirdItem.name }}</span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 状态 -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                <span [ngStyle]="{'color': item.status === 1 ? '#52c41a' : '#ff4d4f'}">
                  {{ status_to_text(item.status) }}
                </span>

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    <span [ngStyle]="{'color': secondItem.status === 1 ? '#52c41a' : '#ff4d4f'}">
                      {{ status_to_text(secondItem.status) }}
                    </span>

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        <span [ngStyle]="{'color': thirdItem.status === 1 ? '#52c41a' : '#ff4d4f'}">
                          {{ status_to_text(thirdItem.status) }}
                        </span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 适用用户 -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                <nz-tag [nzColor]="item.userType === 2 ? 'processing' : (item.userType === 1 ? 'success' : 'default')">
                  {{ userType_to_text(item.userType) }}
                </nz-tag>

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    <nz-tag [nzColor]="secondItem.userType === 2 ? 'processing' : (secondItem.userType === 1 ? 'success' : 'default')">
                      {{ userType_to_text(secondItem.userType) }}
                    </nz-tag>

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        <nz-tag [nzColor]="thirdItem.userType === 2 ? 'processing' : (thirdItem.userType === 1 ? 'success' : 'default')">
                          {{ userType_to_text(thirdItem.userType) }}
                        </nz-tag>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 跳转方式 -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                <!-- {{ type_to_text(item.type) }} -->
                <span>-</span>

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    <!-- {{ type_to_text(secondItem.type) }} -->
                    <span>-</span>

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        {{ type_to_text(thirdItem.type) }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 链接/值 -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                {{ item.url || '-' }}

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    {{ secondItem.url || '-' }}

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        {{ thirdItem.url || '-' }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 图标 -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                <img nz-image width="24px" [nzSrc]="item.icon" [nzFallback]="fallbackImg">

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    <img nz-image width="24px" [nzSrc]="secondItem.icon" [nzFallback]="fallbackImg">

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        <img nz-image width="24px" [nzSrc]="thirdItem.icon" [nzFallback]="fallbackImg">
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 排序 -->
          <td nzAlign="center">
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                {{ (item.sort || item.sort === 0) ? item.sort : '-' }}

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    {{ (secondItem.sort || secondItem.sort === 0) ? secondItem.sort : '-' }}

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        {{ (thirdItem.sort || thirdItem.sort === 0) ? thirdItem.sort : '-' }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>

          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <!-- First -->
            <ul class="first-ul">
              <li class="first-li">
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  (click)="showClassOneModal(1, item)">
                  编辑
                </button>
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除吗?"
                  (nzOnConfirm)="onTableDelete(item)">
                  删除
                </button>

                <!-- Second -->
                <ul [hidden]="!item.isShow" class="second-ul">
                  <li *ngFor="let secondItem of item.list;" class="second-li">
                    <button
                      *ngIf="permission.userPermission.has('rentPlane:class:edit')"
                      nz-button
                      nzType="link"
                      nzSize="small"
                      (click)="showClassTwoModal(1, secondItem)">
                      编辑
                    </button>
                    <button
                      *ngIf="permission.userPermission.has('rentPlane:class:edit')"
                      nz-button
                      nzType="link"
                      nzSize="small"
                      nzDanger
                      nz-popconfirm
                      nzPopconfirmTitle="确认删除吗?"
                      (nzOnConfirm)="onTableDelete(secondItem)"
                      class="delete">
                      删除
                    </button>

                    <!-- Third -->
                    <ul [hidden]="!secondItem.isShow" class="third-ul">
                      <li *ngFor="let thirdItem of secondItem.list;" class="third-li">
                        <button
                          *ngIf="permission.userPermission.has('rentPlane:class:edit')"
                          nz-button
                          nzType="link"
                          nzSize="small"
                          (click)="showClassThreeModal(1, thirdItem)">
                          编辑
                        </button>
                        <button
                          *ngIf="permission.userPermission.has('rentPlane:class:edit')"
                          nz-button
                          nzType="link"
                          nzSize="small"
                          nzDanger
                          nz-popconfirm
                          nzPopconfirmTitle="确认删除吗?"
                          (nzOnConfirm)="onTableDelete(thirdItem)"
                          class="delete">
                          删除
                        </button>
                        <button
                          *ngIf="permission.userPermission.has('rentPlane:class:edit') && thirdItem.type == 4"
                          nz-button
                          nzType="link"
                          nzSize="small"
                          (click)="showRelationGoodsModal({firetItem: item, secondItem: secondItem, thirdItem: thirdItem}, 0)">
                          关联商品
                        </button>
                        <button
                          *ngIf="permission.userPermission.has('rentPlane:class:edit') && thirdItem.type == 4"
                          nz-button
                          nzType="link"
                          nzSize="small"
                          nzDanger
                          (click)="showRelationGoodsModal({firetItem: item, secondItem: secondItem, thirdItem: thirdItem}, 1)">
                          移除商品
                        </button>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 一级分类Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="600"
  [nzFooter]="null"
  [(nzVisible)]="isOneVisible"
  [nzTitle]="(oneClassItem ? '编辑' : '新增') + '一级分类'"
  (nzOnCancel)="isOneVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateOneForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>名称</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称!">
            <input
              nz-input
              placeholder="请输入名称"
              formControlName="name"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4">排序</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-input-number
              style="width: 50%;"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入排序"
              formControlName="sort"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4">顶部图片</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <zdy-upload
              formControlName="topImg"
            ></zdy-upload>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>图标</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择图标!">
            <zdy-upload
              formControlName="icon"
            ></zdy-upload>
          </nz-form-control>
        </nz-form-item>

        <ng-container *ngIf="validateOneForm.value.icon">
          <nz-form-item>
            <nz-form-label [nzSpan]="4">链接</nz-form-label>
            <nz-form-control [nzSpan]="20">
              <input
                nz-input
                placeholder="请输入链接"
                formControlName="url"
              />
            </nz-form-control>
          </nz-form-item>
  
          <!-- <nz-form-item>
            <nz-form-label [nzSpan]="4">参数</nz-form-label>
            <nz-form-control [nzSpan]="20">
              <input
                nz-input
                placeholder="请输入参数，多个参数用@符号隔开"
                formControlName="params"
              />
            </nz-form-control>
          </nz-form-item> -->
        </ng-container>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择状态!">
            <nz-radio-group formControlName="status">
              <label nz-radio [nzValue]="1">启用</label>
              <label nz-radio [nzValue]="0">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isOneVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="subOneLoading" (click)="subClassOneData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 一级分类Modal -->

<!-- S 二级分类Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="600"
  [nzFooter]="null"
  [(nzVisible)]="isTwoVisible"
  [nzTitle]="(twoClassItem ? '编辑' : '新增') + '二级分类'"
  (nzOnCancel)="isTwoVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateTwoForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>上级分类</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择上级分类!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择上级分类"
              formControlName="pid">
              <nz-option
                *ngFor="let option of superiorOptions"
                [nzLabel]="option.name"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>名称</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称!">
            <input
              nz-input
              placeholder="请输入名称"
              formControlName="name"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4">排序</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-input-number
              style="width: 50%;"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入排序"
              formControlName="sort"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择状态!">
            <nz-radio-group formControlName="status">
              <label nz-radio [nzValue]="1">启用</label>
              <label nz-radio [nzValue]="0">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isTwoVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="subTwoLoading" (click)="subClassTwoData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 二级分类Modal -->

<!-- S 三级分类Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="600"
  [nzFooter]="null"
  [(nzVisible)]="isThreeVisible"
  [nzTitle]="(threeClassItem ? '编辑' : '新增') + '三级分类'"
  (nzOnCancel)="isThreeVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateThreeForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>上级分类</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择上级分类!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择上级分类"
              formControlName="pid">
              <nz-option
                *ngFor="let option of superiorOptions"
                [nzLabel]="option.name"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>名称</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称!">
            <input
              nz-input
              placeholder="请输入名称"
              formControlName="name"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>排序</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入排序!">
            <nz-input-number
              style="width: 50%;"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入排序"
              formControlName="sort"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>图标</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择图标!">
            <zdy-upload
              formControlName="icon"
            ></zdy-upload>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4">链接</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <input
              style="width: 80%;"
              nz-input
              placeholder="请输入链接"
              formControlName="url"
            />

            <label
              nz-checkbox
              class="m-l-15"
              [ngModelOptions]="{standalone: true}"
              [(ngModel)]="classTreeChecked"
              (ngModelChange)="classThreeCheckChange($event)"
            >分类</label>
          </nz-form-control>
        </nz-form-item>

        <!-- <nz-form-item>
          <nz-form-label [nzSpan]="4">参数</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <input
              nz-input
              placeholder="请输入参数，多个参数用@符号隔开"
              formControlName="params"
            />
          </nz-form-control>
        </nz-form-item> -->

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请选择状态!">
            <nz-radio-group formControlName="status">
              <label nz-radio [nzValue]="1">启用</label>
              <label nz-radio [nzValue]="0">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isThreeVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="subThreeLoading" (click)="subClassThreeData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 三级分类Modal -->

<!-- S 关联商品 -->
<nz-modal
  [nzWidth]="1100"
  [(nzVisible)]="isRelationVisible"
  [nzTitle]="relationGoodType === 0 ? '批量关联商品' : '批量移除商品'"
  [nzFooter]="null"
  (nzOnCancel)="relationCancel()">
  <ng-container *nzModalContent>
    <div class="common-search-wrap">
      <div class="common-search-forms">
        <div class="common-form-item">
          <label class="common-search-label">商品</label>
          <div class="common-search-conrol">
            <input nz-input placeholder="请输入商品标题" [(ngModel)]="goodTableParams.title" />
          </div>
        </div>

        <div class="common-form-item">
          <div class="common-search-conrol">
            <button nz-button nzType="primary" class="m-r-8" (click)="searchGoodTable()">查询</button>
            <button nz-button nzType="default" class="m-r-8" (click)="resetGoodTable()">重置</button>
            <button
              nz-button
              nzType="primary"
              nzDanger
              [nzLoading]="subRelationGoodLoading"
              [disabled]="!setOfCheckedId.size"
              (click)="subRelationData()">
              {{ relationGoodType === 0 ? '关联' : '移除' }}已选商品{{ setOfCheckedId.size }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="table-box p-t-10">
      <nz-table
        #goodsTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="goodTableParams.loading"
        [nzData]="goodTable"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="goodTableParams.total"
        [nzPageIndex]="goodTableParams.page"
        [nzPageSize]="goodTableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="goodIndexChange($event)"
        (nzPageSizeChange)="goodSizeChange($event)"
        (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
      >
        <thead>
          <tr>
            <th
              nzWidth="80px"
              [(nzChecked)]="checked"
              [nzIndeterminate]="indeterminate"
              (nzCheckedChange)="onAllChecked($event)"
            ></th>
            <th nzAlign="center" nzWidth="100px">ID</th>
            <th nzAlign="center">商品标题</th>
            <th nzAlign="center">状态</th>
            <th nzAlign="center">总库存</th>
          </tr>
        </thead>
  
        <tbody>
          <tr *ngFor="let data of goodsTable.data; let index = index;">
            <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
            <!-- ID -->
            <td nzAlign="center">{{ data.id }}</td>
            <!-- 商品标题 -->
            <td nzAlign="left">
              {{ data.title || '-' }}
              <!-- <div class="goods-name">
                <img nz-image width="42px" height="42px" [nzSrc]="data.icon || fallbackImg" />
                <div class="goods-text">
                  <span [title]="data.name">{{ data.name }}</span>
                </div>
              </div> -->
            </td>
            <!-- 状态 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.status === 0 ? '#67C23A' : '#F56C6C'}">
                {{ data.status === 0 ? '上架中' : (data.status === 1 ? '已下架' : '-') }}
              </span>
            </td>
            <!-- 总库存 -->
            <td nzAlign="center">{{ data.totalInventory }}</td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
  </ng-container>
</nz-modal>
<!-- E 关联商品 -->